<template>
  <view>
    <!-- 导航 -->
    <detail-navigation
      type="service"
      :isLight="!!isLight"
      :load="load"
      :changeLight="changeLight"
      :isBackg="isBackg"
    />

    <view class="head-img">
      <image :src="pageInfo.image" mode="aspectFill" />
    </view>

    <view class="container">
      <!-- 骨架屏 -->
      <view class="skeleton" v-if="load">
        <view class="page-container">
          <u-skeleton rows="6" title loading />
        </view>
      </view>

      <block v-else>
        <!-- 基础信息 -->
        <service-info :pageInfo="pageInfo" />

        <!-- 表单 -->
        <form-view
          :changeGroup="changeGroup"
          :groupIndex="groupIndex"
          :pageInfo="pageInfo"
          :changeShowTime="changeShowTime"
        />
      </block>

      <!-- 选择匠人 -->
      <craftsman-view
        :changeCraftsman="changeCraftsman"
        :craftsmanIndex="craftsmanIndex"
        :craftsmanLoad="craftsmanLoad"
        :craftsList="craftsList"
        :toMoreCraftsman="toMoreCraftsman"
      />
    </view>

    <!-- 底部操作栏 -->
    <bottom-view
      :priceInfo="priceInfo"
      :groupIndex="groupIndex"
      :bottomLoad="bottomLoad"
      :createOrder="createOrder"
    />

    <!-- 选择时间 -->
    <chooseTime :show="showTime" :changeShowTime="changeShowTime" />
  </view>
</template>

<script>
import serviceInfo from "./components/serviceInfo";
import formView from "./components/formView";
import craftsmanView from "./components/craftsmanView";
import bottomView from "./components/bottomView";
import { mapGetters } from "vuex";
import { getServiceDetail, getPrice } from "@/api/service";
import { getTimeCraftsman } from "@/api/craftsman";
import { changeCollectStatus } from "@/api/follow";
import { createBeforeOrder } from "@/api/order";

export default {
  components: {
    serviceInfo,
    formView,
    craftsmanView,
    bottomView,
  },
  data() {
    return {
      load: true,
      craftsmanLoad: true,
      bottomLoad: true,
      isLight: false,
      groupIndex: 0,
      craftsmanIndex: 0,
      isBackg: false,
      showTime: false,
      pageInfo: {},
      craftsList: [],
      priceInfo: {},
    };
  },
  computed: {
    ...mapGetters(["token"]),
  },
  onPageScroll({ scrollTop }) {
    this.isBackg = scrollTop >= 240;
  },
  onLoad({ id }) {
    this.id = id;
    this.getDetail();
  },
  onShow() {
    if (this.isLight == null && this.token) this.getDetail();
  },
  methods: {
    async createOrder() {
      if (!this.craftsList.length) return this.$toast("请选择匠人");
      if (this.bottomLoad) return;
      this.$checkLogin();
      this.$loading();
      const { data } = await createBeforeOrder({
        preOrderType: "buyNow",
        attrValueId: 1,
        orderDetails: [
          {
            productId: this.pageInfo.id,
            serviceId: this.pageInfo.serviceCompositionList[this.groupIndex].id,
            craftsmanId: this.craftsList[this.craftsmanIndex].craftsmanId,
            serviceTime: "2025-05-14 11:00:00",
          },
        ],
      });
      this.$loading.close();
      if (data) this.$navigateTo(`/pages/order/create?id=${data.preOrderNo}`);
    },
    toMoreCraftsman() {
      if (this.craftsmanLoad || !this.craftsList.length) return;
      this.$navigateTo(
        `/pages/craftsman/index?id=${
          this.pageInfo.serviceCompositionList[this.groupIndex].id
        }&time=${"2025-05-14 11:00:00"}`
      );
    },
    async getPrice() {
      this.bottomLoad = true;
      const { data, code } = await getPrice({
        serviceId: this.pageInfo.serviceCompositionList[this.groupIndex].id,
      });
      this.bottomLoad = false;
      if (code !== 200) return;
      this.priceInfo = data;
    },
    changeShowTime(type) {
      if (this.craftsmanLoad) return;
      this.showTime = type;
    },
    async getDetail() {
      const { data, code } = await getServiceDetail({ id: this.id });
      this.load = false;
      this.craftsmanLoad = false;
      this.bottomLoad = false;
      if (code !== 200) return;
      this.pageInfo = data;
      this.isLight = data.isCollect;
      if (!this.craftsList.length) this.getServiceCraftsmanList();
    },
    async getServiceCraftsmanList() {
      this.craftsmanLoad = true;
      this.bottomLoad = true;
      const { data, code } = await getTimeCraftsman({
        serviceId: this.pageInfo.serviceCompositionList[this.groupIndex].id,
        time: "2025-05-14 11:00:00",
        page: 1,
      });
      this.craftsmanLoad = false;
      this.bottomLoad = false;
      if (code !== 200) return;
      this.craftsList = data.list;
      this.getPrice();
    },
    changeGroup(index) {
      if (this.groupIndex == index) return;
      this.groupIndex = index;
      this.getServiceCraftsmanList();
    },
    changeCraftsman(index) {
      this.craftsmanIndex = index;
    },
    async changeLight() {
      this.$checkLogin();
      this.$loading();
      const { data } = await changeCollectStatus({
        productId: +this.pageInfo.id,
      });
      this.$loading.close();
      if (data) this.isLight = !this.isLight;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  border-radius: 16px 16px 0 0;
  margin-top: -16px;
  position: relative;
}

.head-img {
  width: 100vw;
  height: 300px;

  image {
    width: 100%;
    height: 100%;
  }
}

.skeleton {
  padding: 16px;
}
</style>